<template>
  <div class="container" ref="mainCon">
    <topTitle :titleText="titleText"></topTitle>
    <div class="mainCon">
      <el-row class="toolbar searchInputWidth" style="padding-bottom: 0">
        <el-form :inline="true" :model="filterField" ref="searchConditions">
          <el-col :lg="8" :xl="6">
            <el-form-item label="项目状态" class="row-padding-bottom">
              <el-select
                v-model="filterField.projectStatus"
                filterable
                placeholder="请选择"
                clearable
                :popper-append-to-body="false"
              >
                <el-option
                  v-for="item in statusOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :xl="6">
            <el-form-item label="预警类型" class="row-padding-bottom">
              <el-select
                v-model="filterField.alertType"
                clearable
                filterable
                placeholder="请选择"
                :popper-append-to-body="false"
              >
                <el-option
                  v-for="item in typeOptions"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :xl="6">
            <el-form-item label="">
              <el-button
                type="primary"
                icon="icon iconfont iconchazhao1"
                @click="searchList"
                class="searchBtn"
              >
                <span>搜索</span>
              </el-button>
              <el-button
                class="commonBut saveBtn funComBut"
                icon="icon iconfont icondaochu"
                @click="exportList"
              >
                <span class="opetareText">导出</span>
              </el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div class="spacing"></div>
      <div class="tableBoxs">
        <el-table
          :data="tableList"
          v-loading="loadingAll"
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
          lazy
          style="width: 100%"
          :load="load"
          row-key="id"
          border
          :max-height="tableHeight"
          @filter-change="handleFilterChange"
          ref="table"
        >
          <!-- <my-column v-for="(item,index) in tableCol" :key="index" :col="item" :colArr = "tableCol"></my-column> -->
          <el-table-column
            label="统计纬度"
            align="center"
            width="500"
            fixed="left"
          >
            <el-table-column
              prop="areaName"
              label="区域"
              fixed="left"
              width="180"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="industryName"
              label="行业"
              fixed="left"
              column-key="industryName"
              :filter-multiple="false"
              :filterField="ndustryNameList"
              width="180"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="investmentName"
              column-key="investmentName"
              label="投资类别"
              fixed="left"
              :filter-multiple="false"
              :filterField="investmentNameList"
              width="180"
              align="center"
            ></el-table-column>
          </el-table-column>
          <el-table-column label="预警统计">
            <el-table-column
              prop="alertProjectNum"
              label="预警项目个数"
              align="center"
              :formatter="formatTd"
              min-width="160"
            ></el-table-column>
            <el-table-column
              prop="alertTotal"
              label="预警总数"
              align="center"
              :formatter="formatTd"
              min-width="130"
            ></el-table-column>
            <el-table-column
              label="未处理/处理中/已处理(数量)"
              align="center"
              :formatter="formatTd"
              min-width="220"
            >
              <template slot-scope="scope">
                <sapn style="color: #d9001b">{{
                  scope.row.alertUnDo || '0'
                }}</sapn
                >/
                <sapn style="color: #f59a23">{{
                  scope.row.alertDoing || '0'
                }}</sapn
                >/
                <sapn style="color: #70b603">{{
                  scope.row.alertDone || '0'
                }}</sapn>
              </template>
            </el-table-column>
            <el-table-column
              label="未处理/处理中/已处理(比例)"
              align="center"
              :formatter="formatTd"
              min-width="220"
            >
              <template slot-scope="scope">
                <sapn>{{ scope.row.alertUnDoScale || '0' }}</sapn
                >/ <sapn>{{ scope.row.alertDoingScale || '0' }}</sapn
                >/
                <sapn>{{ scope.row.alertDoneScale || '0' }}</sapn>
              </template>
            </el-table-column>
            <el-table-column
              label="系统消除/监察消除/银行消除/行业主管消除"
              align="center"
              min-width="320"
            >
              <template slot-scope="scope">
                <sapn>{{ scope.row.sysHandler || '0' }}</sapn
                >/ <sapn>{{ scope.row.monitorHandler || '0' }}</sapn
                >/ <sapn>{{ scope.row.bankHandler || '0' }}</sapn
                >/
                <sapn>{{ scope.row.directorHandler || '0' }}</sapn>
              </template>
            </el-table-column>
            <el-table-column width="380" align="center" v-if="!isEsUser()">
              <template slot="header" slot-scope="scope">
                各严重程度未处理预警数
                <el-tooltip
                  content="Right center"
                  placement="top-start"
                  effect="dark"
                >
                  <div slot="content">
                    严重程度:各区域在预警设置中的自定义配置
                  </div>

                  <i class="icon iconfont iconhuabanfuben"></i>
                </el-tooltip>
                <div class="levelList">
                  <span> <span class="squera levelOne"></span> 一般程度</span>
                  <span> <span class="squera levelTwo"></span>中等程度</span>
                  <span> <span class="squera levelThree"></span>严重程度</span>
                  <span> <span class="squera levelFour"></span>重大程度</span>
                </div>
              </template>
              <template slot-scope="scope">
                <sapn class="textOne">{{ scope.row.generalDegree || '0' }}</sapn
                >/
                <sapn class="textTwo">{{ scope.row.mediumDegree || '0' }}</sapn
                >/ <sapn class="textThree">{{ scope.row.severity || '0' }}</sapn
                >/
                <sapn class="textFour">{{ scope.row.majority || '0' }}</sapn>
              </template>
            </el-table-column>
            <el-table-column
              prop="punishNum"
              label="有处罚的预警数"
              align="center"
              :formatter="formatTd"
              min-width="230"
            ></el-table-column>
          </el-table-column>
          <!-- 表格数据为空时，页面显示 -->
          <div slot="empty" v-show="isShow">
            <emptyTable emptyText="暂无相关数据"></emptyTable>
          </div>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>
import common from '../../kits/common'
import MyColumn from './MyColumn'

export default {
  name: 'alertCount',
  components: {
    MyColumn,
  },
  data() {
    return {
      titleText: '预警统计',
      //查询条件数据封装
      typeOptions: [],
      statusOptions: [{ id: 'STARTED', name: '已开工' }],
      //表格数据
      tableList: [],
      loadingAll: true, //全部项目loading
      isShow: false, //列表加载
      loading: true,
      filterField: {
        areaId: '',
        industryId: 'total',
        investment: 'total',
        alertType: '',
        projectStatus: '',
      },
      investmentNameList: [
        { value: 'GOV', text: '政府投资' },
        { value: 'GOV_AND_SOCIETY', text: '政府与社会共筹' },
        { value: 'NATIONAL', text: '国企项目' },
        { value: 'NOT_GOV', text: '非政府投资' },
        { value: 'OTHERS', text: '其他工程项目' },
      ],
      tableCol: [
        {
          id: '1',
          prop: 'date',
          isShow: true,
          label: '统计维度',
          disabled: true,
          children: [
            {
              id: '11',
              prop: 'areaName',
              isShow: true,
              disabled: true,
              label: '区域',
            },
            {
              id: '12',
              prop: 'industryName',
              disabled: true,
              isShow: true,
              label: '行业',
            },
            {
              id: '13',
              prop: 'investmentName',
              disabled: true,
              isShow: true,
              label: '投资类别',
            },
          ],
        },
      ],
    }
  },
  computed: {
    ndustryNameList: function () {
      const vm = this
      let users = vm.$store.state.industryOptions
      let arr = []
      for (let item of users) {
        let obj = {
          value: '',
          text: '',
        }
        obj.value = item.code
        obj.text = item.name
        arr.push(obj)
      }
      return arr
    },
  },
  created() {
    this.getTypeData('api-bs/base/dicitem/findbytype', {
      type: 'CS_ALERT_TYPE',
    }) //预警类型下拉框
    this.getTableCol()
    this.getTableListAddItem()
  },
  methods: {
    handleFilterChange(value) {
      console.log(value)
      if (value.industryName) {
        if (value.industryName.toString()) {
          this.filterField.industryId = value.industryName.toString()
        } else {
          this.filterField.industryId = 'total'
        }
      } else if (value.investmentName) {
        if (value.investmentName.toString()) {
          this.filterField.investment = value.investmentName.toString()
        } else {
          this.filterField.investment = 'total'
        }
      }
      this.getTableData()
    },
    /**
     * @description: 获取统计全部项目表头数据
     */
    getTableCol() {
      const vm = this
      vm.axios({
        method: 'post',
        url: '/api-s/dimension/head?type=' + 'ALERT_ALL',
      })
        .then((response) => {
          var arr1 = []
          arr1 = response.data.result
          vm.tableCol = vm.tableCol.concat(arr1)
        })
        .catch((error) => {
          vm.$message({
            showClose: true,
            duration: 3000,
            message: '获取全部项目表头失败',
            type: 'error',
          })
        })
    },
    getTableData() {
      this.axios({
        method: 'post',
        url: 'api-s/cs/project/alert/stats/filter',
        data: this.filterField,
      })
        .then((response) => {
          this.tableList = response.data.result
        })
        .catch((error) => {})
    },
    /**
     * @description: 获取表格数据
     */
    getTableListAddItem() {
      const vm = this
      vm.axios({
        method: 'post',
        url: 'api-s/cs/project/alert/stats/listbyall',
        data: this.filterField,
      }).then((response) => {
        vm.tableList = response.data.result
        vm.loadingAll = false
        if (this.tableList.length < 1) {
          vm.isShow = true
        }
      })
    },
    /**
     * @description: 懒加载表格的子节点数据
     */
    load(tree, treeNode, resolve) {
      let that = this
      let industryValue = tree.industryId || ' '
      let industryId
      if (tree.industryId) {
        industryId = tree.industryId + ''
      } else {
        industryId = 'all'
      }
      let investment
      if (tree.industryId) {
        investment = 'all'
      } else if (this.filterField.investment) {
        investment = this.filterField.investment
      } else {
        industryId = 'total'
      }
      this.axios({
        method: 'post',
        url: 'api-s/cs/project/alert/stats/filter',
        data: {
          id: tree.id,
          areaId: tree.areaId,
          isStats: tree.isStats,
          industry: industryValue,
          industryId: industryId,
          investment: investment,
          projectStatus: that.filterField.projectStatus,
          alertType: that.filterField.alertType,
        },
      }).then((res) => {
        let tableArray = res.data.result

        if (treeNode.level === 0) {
          tableArray.forEach((item, index) => {
            delete item.areaName
          })
        } else {
          tableArray.forEach((item, index) => {
            item.hasChildren = false
            delete item.areaName
          })
        }
        resolve(tableArray)

        if (res.data.result.length == 0) {
          this.$message({
            type: 'error',
            message: '本节点以下暂无子节点!',
          })
        }
      })
    },
    getTypeData(urls, datas) {
      this.axios({
        method: 'post',
        url: urls,
        data: datas,
      })
        .then((resp) => {
          this.typeOptions = resp.data.result
        })
        .catch((resp) => {})
    },
    // 搜索
    searchList() {
      this.getTableListAddItem()
    },
    exportList() {
      if (this.tableList.length == 0) {
        this.$message({
          message: '无数据可导出',
          type: 'warning',
        })
      } else {
        let arr = []
        this.tableCol.forEach((item) => {
          item.children.forEach((items) => {
            arr.push(items.prop)
          })
        })
        let url =
          common.commonApi +
          'api-s/cs/project/alert/stats/export?type=ALERT_ALL&field=' +
          arr +
          '&projectStatus=' +
          this.filterField.projectStatus +
          '&alertType=' +
          this.filterField.alertType +
          '&industry=' +
          this.filterField.industryId +
          '&invest=' +
          this.filterField.investment +
          '&access_token=' +
          localStorage.getItem('access_token')
        window.location.href = url
      }
    },
  },
}
</script>

<style lang="less" scoped>
.title {
  padding-left: 4px;
  padding-top: 10px;
  margin-bottom: -10px;
  font: bold 18px/50px Microsoft YaHei;
}
.levelList span {
  color: #666;
  font-size: 12px;
}
.squera {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 5px 0 15px;
}
.tableBoxs {
  padding: 24px;
}
.levelOne {
  background-color: #fc0;
}
.levelTwo {
  background-color: #ff9500;
}
.levelThree {
  background-color: #e02020;
}
.levelFour {
  background-color: #880909;
}
.textOne {
  color: #fc0;
}
.textTwo {
  color: #ff9500;
}
.textThree {
  color: #e02020;
}
.textFour {
  color: #880909;
}
@import '../../../static/css/filterArea.less';
</style>
